<template>
  <div class="app-contrinal">
    <!-- 顶部header -->
    <van-nav-bar fixed class ="nav" title="小app"  
    :left-arrow="flag"  @click-left="onClickLeft"/>
    <!-- 路由坑 -->
    <transition >
        <router-view/>
    </transition>
    	<!-- 底部导航栏 -->

     
    <van-tabbar  route>
    	<van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
    	<van-tabbar-item icon="contact" to="/vip">会员</van-tabbar-item>
    	<van-tabbar-item icon="shopping-cart-o" :badge="updatecar"  to="/goodsCar">购物车</van-tabbar-item>
    	<van-tabbar-item icon="search" to="/search" >搜索</van-tabbar-item>
    </van-tabbar>
	  
  
  </div>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    export default {
        data() {
            return {
                flag: true
            }
        },
        created() {
            if (this.$route.path === '/home') {
                this.flag = false
            } else {
                this.flag = true;
            }
        },
        methods: {
            //返回上一层
            onClickLeft() {
                this.$router.go(-1)
            }
        },
        computed: {
            ...mapGetters(['updatecar'])
        },
        //监听$route.path 如果为/home 则隐藏 返回按钮
        watch: {
            '$route.path': function(newval, oldval) {
                if (newval === '/home') {
                    this.flag = false
                } else {
                    this.flag = true;
                }
            }
        },
    }
</script>

<style scoped>
    .app-contrinal {
        overflow: hidden;
        padding-top: 46px;
        padding-bottom: 50px;
        position: relative;
    }
    
    .nav {
        z-index: 99;
    }
    
    .v-enter {
        opacity: 0;
        transform: translateX(100%);
    }
    
    .v-leave-to {
        opacity: 0;
        transform: translateX(-100%);
        position: absolute;
    }
    
    .v-enter-active,
    .v-leave-active {
        transition: all 0.7s ease;
    }
</style>